<template>
  <div>
    <el-dialog
      :title="addForm.id ? '编辑指令' : '新增指令'"
      :visible.sync="dialogVisible"
      width="860px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="refForm"
        label-width="100px"
        inline
      >
        <el-form-item
          size="small"
          label="探测器型号"
          prop="detectorType"
          v-if="addForm.layoutType != 1"
        >
          <el-select
            v-model="addForm.detectorType"
            placeholder="请选择"
            style="width: 300px"
            filterable
            @change="detectorTypeChange"
          >
            <el-option
              v-for="item in detectorProductList"
              :key="item.id"
              :label="item.name"
              :value="item.detectorType"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          size="small"
          label="探测器编号"
          :prop="deviceInfo.protocol == 7 ? 'detectorDeviceCode' : ''"
          v-if="addForm.layoutType != 1"
        >
          <el-input
            oninput="value=value.replace(/[\u4e00-\u9fa5]/g,'')"
            @blur="addForm.detectorDeviceCode = $event.target.value"
            style="width: 300px"
            clearable
            v-model="addForm.detectorDeviceCode"
            placeholder="请输入"
            maxlength="80"
          ></el-input>
        </el-form-item>

        <!-- deviceInfo.protocol -->
        <!--   @change="commandInfoChange" -->
        <el-form-item
          size="small"
          label="指令内容"
          prop="commandInfo1"
          v-if="deviceInfo.protocol == 7"
        >
          <el-select
            v-model="addForm.commandInfo1"
            placeholder="请选择"
            style="width: 300px"
            filterable
            v-if="addForm.layoutType == 1"
          >
            <el-option
              v-for="item in commandInfoList1"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="addForm.commandInfo1"
            placeholder="请选择"
            style="width: 300px"
            filterable
            v-else
          >
            <el-option
              v-for="item in commandInfoList2"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="指令内容" prop="commandInfo" v-else>
          <el-input
            style="width: 300px"
            clearable
            v-model="addForm.commandInfo"
            placeholder="请输入"
            maxlength="80"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="地址映射" prop="addressMapping">
          <el-input
            style="width: 300px"
            clearable
            v-model="addForm.addressMapping"
            placeholder="请输入"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="分组编号" prop="groupNo">
          <el-input
            style="width: 300px"
            clearable
            v-model="addForm.groupNo"
            placeholder="请输入"
            maxlength="3"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="排序" prop="keyNo">
          <el-input
            style="width: 300px"
            clearable
            v-model="addForm.keyNo"
            placeholder="请输入"
            maxlength="3"
          ></el-input>
        </el-form-item>
        <el-form-item
          size="small"
          label="指令名称"
          prop="keyName"
          v-if="addForm.layoutType == 1"
        >
          <el-input
            style="width: 300px"
            clearable
            v-model="addForm.keyName"
            placeholder="请输入"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="指令名称" prop="keyName1" v-else>
          <el-radio-group
            v-model="addForm.keyName1"
            style="width: 300px"
            @change="changeKeyName1"
          >
            <el-radio label="启动">启动</el-radio>
            <el-radio label="停止">停止</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          size="small"
          label="指令状态"
          prop="statusList"
          v-if="addForm.layoutType != 1 && addForm.keyName"
        >
          <el-checkbox-group
            v-model="addForm.statusList"
            @change="changeStatusList"
          >
            <el-checkbox label="1" v-if="addForm.keyName === '启动'"
              >启动</el-checkbox
            >
            <el-checkbox label="2" v-if="addForm.keyName === '停止'"
              >停止</el-checkbox
            >
            <el-checkbox label="3">反馈</el-checkbox>
            <el-checkbox label="4">故障</el-checkbox>
            <el-checkbox label="5">工作</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          @click="submit"
          v-preventReClick="1000"
          class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqKeyCommandAdd,
  reqDetectorProductList,
  reqKeyCommandEdit,
} from "@api/api.js";
import {
  validateNumber,
  validateNumberLetter,
  validateNoChinese,
} from "@utils/validate";
import { mapState } from "vuex";

export default {
  // inject: ["deviceInfo"],
  props: ["itemInfo", "deviceInfo"],
  components: {},
  data() {
    return {
      dialogVisible: false,

      detectorProductList: [],

      commandInfoList1: [
        { name: "复位", value: "reset" },
        { name: "消音", value: "erasure" },
        { name: "手自动启动", value: "auto_on" },
        { name: "手自动关闭", value: "auto_off" },
      ],
      commandInfoList2: [
        { name: "点位启动", value: "point_start" },
        { name: "点位停止", value: "point_stop" },
        { name: "声光启动", value: "acousto_optic_start" },
        { name: "声光关闭", value: "acousto_optic_stop" },
      ],

      addForm: {
        id: "",
        deviceType: "",
        detectorType: "",
        deviceCode: "",

        layoutType: "",
        panelNo: "",
        groupNo: "",
        keyNo: "",

        keyName: "",
        keyName1: "",
        commandInfo: "",
        commandInfo1: "",
        detectorDeviceCode: "",
        addressMapping: "",

        statusList: [],

        usedConfig: 1,
      },
      rules: {
        detectorType: [
          { required: true, message: "请选择探测器型号", trigger: "change" },
        ],
        keyName: [
          { required: true, message: "请输入指令名称", trigger: "blur" },
        ],
        keyName1: [
          { required: true, message: "请选择指令名称", trigger: "change" },
        ],
        commandInfo: [
          { required: true, message: "请输入指令内容", trigger: "blur" },
          { validator: validateNoChinese },
        ],
        commandInfo1: [
          { required: true, message: "请选择指令内容", trigger: "change" },
        ],
        detectorDeviceCode: [
          { required: true, message: "请输入探测器编号", trigger: "blur" },
        ],
        addressMapping: [
          { required: true, message: "请输入地址映射", trigger: "blur" },
        ],
        groupNo: [
          { required: true, message: "请输入分组编号" },
          { validator: validateNumber },
        ],
        keyNo: [
          { required: true, message: "请输入在分组内排序号", trigger: "blur" },
          { validator: validateNumber },
        ],
        statusList: [
          {
            required: true,
            message: "请选择指令状态",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {
    dialogVisible(e) {
      if (e) {
        this.$nextTick(async () => {
          await this.getDetectorProductList();
        });
        const { itemInfo } = this;
        // console.log("itemInfo", itemInfo);
        this.addForm.layoutType = itemInfo.layoutType;
        this.addForm.panelNo = itemInfo.panelNo;
        if (itemInfo.id) {
          this.addForm.id = itemInfo.id;
          this.addForm.detectorType = itemInfo.detectorType;
          this.addForm.deviceCode = itemInfo.deviceCode;
          this.addForm.groupNo = itemInfo.groupNo;
          this.addForm.keyNo = itemInfo.keyNo;
          this.addForm.keyName = itemInfo.keyName;
          this.addForm.keyName1 = itemInfo.keyName;
          this.addForm.commandInfo = itemInfo.commandInfo;
          this.addForm.detectorDeviceCode = itemInfo.detectorDeviceCode;

          this.addForm.addressMapping = itemInfo.addressMapping;

          this.addForm.statusList = Array.isArray(itemInfo.commandInfos)
            ? itemInfo.commandInfos.map((item) => item.statusType)
            : [];

          if (this.deviceInfo.protocol == 7) {
            this.addForm.commandInfo1 = itemInfo.commandInfo;
          }
        }
        // console.log("this.addForm", this.addForm);
      }
    },
  },
  methods: {
    // 探测器型号列表
    async getDetectorProductList() {
      let res = await reqDetectorProductList({
        parentDeviceType:
          this.deviceInfo.deviceType || this.deviceInfo.parentDeviceType,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.detectorProductList = res.data.list;
    },
    detectorTypeChange(e) {
      this.addForm.detectorTypeName = this.detectorProductList.find(
        (item) => item.detectorType == e
      ).name;
    },
    changeKeyName1(e) {
      this.addForm.keyName = e;
      const { statusList } = this.addForm;
      if (e === "启动") {
        // 如果发现有2就从statusList删除2
        this.addForm.statusList = statusList.filter((item) => item !== "2");
      } else if (e === "停止") {
        // 如果发现有1就从statusList删除1
        this.addForm.statusList = statusList.filter((item) => item !== "1");
      }
    },
    changeStatusList(e) {},
    // 点击绑定
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        if (!valid) return;
        let {
          id,
          detectorType,

          layoutType,
          panelNo,
          groupNo,
          keyNo,

          statusList,

          keyName,
          commandInfo,
          commandInfo1,
          detectorDeviceCode,
          addressMapping,
        } = this.addForm;

        statusList.sort((a, b) => Number(a) - Number(b));

        if (this.itemInfo.id) {
          // 编辑
          const res = await reqKeyCommandEdit({
            id,

            deviceType:
              this.deviceInfo.deviceType || this.deviceInfo.parentDeviceType,
            deviceCode: this.deviceInfo.imei || this.deviceInfo.deviceCode,

            detectorType,

            layoutType,
            panelNo,
            groupNo,
            keyNo,

            keyName,
            commandInfo:
              this.deviceInfo.protocol == 7 ? commandInfo1 : commandInfo,
            detectorDeviceCode,
            addressMapping,

            statusList,

            usedConfig: 1,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("编辑成功");
          this.$emit("update", JSON.parse(JSON.stringify(this.addForm)));
          this.closeDialog();
        } else {
          // 新增
          const res = await reqKeyCommandAdd({
            deviceType:
              this.deviceInfo.deviceType || this.deviceInfo.parentDeviceType,
            deviceCode: this.deviceInfo.imei || this.deviceInfo.deviceCode,

            detectorType,

            layoutType,
            panelNo,
            groupNo,
            keyNo,

            keyName,
            commandInfo:
              this.deviceInfo.protocol == 7 ? commandInfo1 : commandInfo,
            detectorDeviceCode,
            addressMapping,

            statusList,

            usedConfig: 1,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("新增成功");
          this.$emit("update", JSON.parse(JSON.stringify(this.addForm)));
          this.closeDialog();
        }
      });
    },

    // 点击关闭弹框
    closeDialog() {
      this.$refs.refForm.resetFields();
      this.addForm.id =
        this.addForm.deviceType =
        this.addForm.detectorType =
        this.addForm.deviceCode =
        this.addForm.layoutType =
        this.addForm.panelNo =
        this.addForm.groupNo =
        this.addForm.keyNo =
        this.addForm.keyName =
        this.addForm.keyName1 =
        this.addForm.commandInfo =
        this.addForm.commandInfo1 =
        this.addForm.detectorDeviceCode =
        this.addForm.addressMapping =
          "";
      this.addForm.statusList = [];
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../../views/common.less");
// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 2016;
  // background: red;
  // opacity: 0.5;
}

.value {
  color: @primaryTxtcolor;
}

// 下拉框加载结束

::v-deep .el-loading-mask {
  border-radius: 4px;
}

// 单选按钮
::v-deep .el-radio {
  color: @primaryThemeTxtColor2;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #7367f0;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #7367f0;
  background: #7367f0;
}

// 多选按钮
::v-deep .el-checkbox {
  color: @primaryThemeTxtColor2;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #7367f0;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: #7367f0;
  background: #7367f0;
}
</style>
